import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home:Appointment_pay_details(),
    );
  }

}
class Appointment_pay_details extends StatefulWidget {
  @override
  Appointment_pay_detailsState createState() => new Appointment_pay_detailsState();
}

class Appointment_pay_detailsState extends State<Appointment_pay_details>{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
            backgroundColor: Color.fromRGBO(51, 51, 51, 1),
            titleSpacing: 0.0,
            title:Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children:<Widget> [
                FlatButton(
                  materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                  child: Row(
                    children:<Widget> [
                      Icon(Icons.arrow_back_ios,color: Colors.white,),
                      Text('返回',style: TextStyle(color: Colors.white,fontSize: 16),)
                    ],
                  ),
                  onPressed: (){},
                ),
                Container(child: Row(children: [
                  Text('预约待付款详情',style: TextStyle(fontSize: 16,color: Colors.white,),),
                  SizedBox(width: 25,)
                ],),),
                IconButton(icon: Icon(Icons.more_horiz),color: Colors.white, onPressed: (){})
              ],
            )
        ),
        body: Column(
          children: <Widget>[
            Container(
              height: 450,
              color:Colors.white,
              child: Column(
                children: <Widget>[
                  Container(

                    margin:EdgeInsets.only(left: 20,right: 20,top: 10,),
                    color: Colors.white,
                    child: Column(
                      children:<Widget> [
                        Column(
                          children: <Widget>[
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: <Widget>[
                                Text("预约",
                                  style: TextStyle(fontSize: 10),),
                                Text("待接单",
                                  style: TextStyle(fontSize: 15,color: Colors.red),),
                              ],
                            ),
                            SizedBox(
                              height: 10,
                            ),

                            Row(
                              mainAxisAlignment: MainAxisAlignment.start,
                              children:<Widget> [
                                Text("任务主题（限制20字）",
                                  style: TextStyle(fontSize: 20),),
                              ],
                            ),
                          ],
                        ),//first
                        SizedBox(
                          height: 30,
                        ),
                        Divider(
                          color: Colors.grey,
                        ),
                        Column(
                          children: <Widget>[
                            Row(
                              mainAxisAlignment:MainAxisAlignment.start,
                              children:<Widget> [
                                Icon(Icons.monetization_on,color: Colors.grey,),
                                SizedBox(
                                  width: 10,
                                ),
                                Text("已支付：5元",
                                  style: TextStyle(fontSize: 15,),),
                              ],
                            ),
                            SizedBox(
                              height: 10,
                            ),
                            Row(
                              mainAxisAlignment:MainAxisAlignment.start,
                              children: <Widget>[
                                Icon(Icons.access_time,color: Colors.grey,),
                                SizedBox(
                                  width: 10,
                                ),
                                Text("预计开始时间：2020/11/12  18:00"),
                              ],
                            ),
                            SizedBox(
                              height: 10,
                            ),
                            Row(
                              mainAxisAlignment:MainAxisAlignment.start,
                              children:<Widget> [
                                Container(
                                  margin: EdgeInsets.only(left: 33),
                                  child: Text("预计结束时间：2020/11/12  20:00"),
                                ),
                              ],
                            ),
                            SizedBox(
                              height: 30,
                            ),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.start,
                              children: <Widget>[
                                Icon(Icons.email,color: Colors.grey,),
                                SizedBox(
                                  width: 10,
                                ),
                                Expanded(
                                  child: Padding(
                                    padding: EdgeInsets.only(top: 13,),
                                    child: Text("任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容",
                                    ),
                                  ),
                                ),
                              ],
                            ),

                          ],
                        ),//second
                        SizedBox(
                          height: 20,
                        ),
                        Divider(
                          color: Colors.grey,
                        ),
                        Column(
                          children:<Widget> [
                            Row(
                              children: <Widget>[
                                Icon(Icons.location_on,color: Colors.grey,),
                                SizedBox(
                                  width: 10,
                                ),
                                Text("发单人姓名"),
                                SizedBox(width: 30,),
                                Text("15688888888"),
                              ],
                            ),
                            Row(
                              children: <Widget>[
                                SizedBox(width: 32,),
                                Text(
                                    "福建省厦门市"
                                ),
                              ],
                            ),
                          ],
                        ),//third
                        SizedBox(height: 30,),
                        Divider(color: Colors.grey,),
                        Row(
                          children: <Widget>[
                            Icon(Icons.access_time,color: Colors.grey,),
                            SizedBox(
                              width: 10,
                            ),
                            Text("发布时间：2020/11/12   18：00"),
                          ],
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
            Spacer(),
            Container(
              color: Colors.white,
              height: 50,
              margin:EdgeInsets.only(right: 20),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: <Widget>[
                  OutlineButton(
                    child: Text("取消订单"),
                    onPressed: (){
                      showDialog(
                          context:context,
                          barrierDismissible: false,
                          builder: (context){
                            return  DemoDialog();
                          }
                      );
                    },
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
class DemoDialog extends StatefulWidget {
  @override
  DemoDialogState createState() => new DemoDialogState();
}

class DemoDialogState extends State<DemoDialog> {
  String dropdownValue = '原因1';
  @override
  Widget build(BuildContext context) {
    return Material(
      //创建透明层
      type: MaterialType.transparency, //透明类型
      child: new Center(
        //保证控件居中效果
        child: new SizedBox(
          width: MediaQuery.of(context).size.width*0.6,
          height: 200.0,
          child: Container(
            decoration: BoxDecoration(
                border: new Border.all(color: Colors.black, width: 0.5),
                color: Colors.white),
            child: Column(
              children: <Widget>[
                SizedBox(height: 10,),
                Text("取消原因",style: TextStyle(fontSize: 20),),
                SizedBox(height: 30,),
                Container(
                  width: MediaQuery.of(context).size.width*0.3,
                  height: 23,
                  decoration: BoxDecoration(
                      border: new Border.all(color: Colors.black, width: 1),
                      color: Colors.white),
                  child: DropdownButton<String>(
                    value: dropdownValue,
                    isExpanded: true,
                    onChanged: (String newValue) {
                      setState(() {
                        dropdownValue = newValue;
                      });
                    },
                    items: <String>['原因1', '原因2', '原因3', '原因4']
                        .map<DropdownMenuItem<String>>((String value) {
                      return DropdownMenuItem<String>(
                        value: value,
                        child: Text(value),
                      );
                    })
                        .toList(),
                  ),
                ),
                Spacer(),
                Row(
                  children: <Widget>[
                    Expanded(
                      child: Container(
                        child: Center(
                          child: FlatButton(
                            highlightColor:Color.fromRGBO(255,255,255,0),
                            child: Text("确认"),
                            onPressed: (){

                            },
                          ),
                        ),
                        decoration: BoxDecoration(
                          border: new Border.all(color: Colors.black, width: 0.5),
                        ),
                      ),
                    )
                    ,
                    Expanded(
                      child: Container(
                        child: Center(
                          child: FlatButton(
                            highlightColor:Color.fromRGBO(255,255,255,0),
                            child: Text("取消"),
                            onPressed: (){
                              Navigator.pop(context);
                            },
                          ),
                        ),
                        decoration: BoxDecoration(
                          border: new Border.all(color: Colors.black, width: 0.5),
                        ),
                      ),
                    )
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
